/********************************************************************************
 *@description: 问题内容 新增|编辑|详情
 *@author: Xhd
 *@API: qingyue
 *@Product: yinlekai
 *@date: 2024-05-07 15:33:28
 *@version: V1.0.0
**********************************************************************************/

import React, { Component } from 'react';
import { Button, Form, Input, Select, Space, InputNumber } from 'antd';
import GoBack from "@/components/TheGoBack";
import { apiGetQuestionTypeList, apiGetQuestionContentAddOrUpdate, apiGetQuestionContentViews } from "@/request/app/questions";
import TheQuill from "@/components/TheQuill";

const tList = {
  add: "创建内容",
  edit: "编辑内容",
  view: "查看内容"
}
const TextArea = Input
const { Option } = Select
const controls = {
  controls: [
    "undo",
    "redo",
    "separator",
    // "font-size",
    "text-color",
    "bold",
    // "italic",
    "underline",
    // "strike-through",
    // "separator",
    // "superscript",
    // "subscript",
    // "remove-styles",
    // "emoji",
    "separator",
    // "text-indent",
    "text-align",
    "separator",
    // "headings",
    "list-ul",
    "list-ol",
    // "blockquote",
    "separator",
    // "link",
    // "separator",
    // "separator",
    // "separator",
    "clear",
  ],
  extendControls: []
}

class Name extends Component {
  constructor(props) {
    super(props)
    this.formRef = React.createRef();
    this.state = {
      title: tList[this.props.match.params.type],
      disabled: false,
      options: [],
      questionContent: null
    }
  }

  componentDidMount() {
    this.getTypeList()
    if (this.props.match.params.type !== "add") {
      this.getContent()
    }
  }

  getTypeList = async () => {
    await apiGetQuestionTypeList().then(res => {
      if (res.code === 0) {
        this.setState({
          options: res.data
        })
      }
    })
  }

  getContent = async () => {
    const contentId = this.props.match.params.id
    await apiGetQuestionContentViews({ contentId }).then(res => {
      if (res.code === 0) {
        this.setNewsContent(res.data.content)
        this.setState({
          questionContent: res.data.content,
        })
        this.formRef.current.setFieldsValue(res.data)
      }
    })
  }

  setNewsContent = (data) => {
    this.formRef.current.setFieldsValue({ content: data })
  }

  onFinish = async (values) => {
    const contentId = this.props.match.params.id
    let params = { ...values }
    if (contentId !== "null") {
      params = { ...params, contentId }
    }
    await apiGetQuestionContentAddOrUpdate(params).then(res => {
      if (res.code === 0) {
        React.$message({
          type: "success",
          content: "保存成功, 2秒后返回"
        })
        setTimeout(() => {
          this.props.history.go(-1)
        }, 2000)
      }
    })
  }

  render() {
    const { title, questionContent, options } = this.state
    console.log(questionContent);
    return (<div className='p-layout-box'>
      <GoBack history={this.props.history} title={title} /><br />
      <Form disabled={this.props.match.params.type === "view"} ref={this.formRef}
        labelCol={{ span: 2, offset: 0 }} wrapperCol={{ span: 12, offset: 0 }}
        onFinish={(values) => this.onFinish(values)} 
      >
        <Form.Item label="问题类型" name="typeId" rules={[{ required: true }]} >
          <Select placeholder="请选择" >
            {options.map(v => <Option value={v.typeId} >{v.typeName}</Option>)}
          </Select>
        </Form.Item>
        <Form.Item label="标题" name="title" rules={[{ required: true }]} >
          <Input placeholder='请输入' maxLength={20} />
        </Form.Item>
        <Form.Item label="排序" name="sort" rules={[{ required: true }]} >
          <InputNumber placeholder='请输入' min={0} controls={false} precision={0} />
        </Form.Item>
        <Form.Item label="内容" name="content" rules={[{ required: true }]} >
          {this.props.match.params.type === "add" || questionContent ? <TheQuill controls={controls} maxTextLength={1000} defaultValue={questionContent} setNewsContent={this.setNewsContent} />: null}
        </Form.Item>
        {this.props.match.params.type === "view" ? null : <Form.Item wrapperCol={{ span: 12, offset: 2 }} >
          <Space>
            <Button type='primary' htmlType='submit' >确定</Button>
            <Button onClick={() => this.props.history.go(-1)} >取消</Button>
          </Space>
        </Form.Item>}
      </Form>
    </div>)
  }
}

export default Name